<template>      
  <div class="man_content">
    <div class="man_body">
      <el-container>
        <el-header>
          <el-row :gutter="20">
            <el-col :span="21">
              <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#409EFF"
                router
              >
                <img
                  class="logo"
                  src="/images/logo.png"
                >  
                <!-- 栏目导航 -->
                <div
                  v-for="column in menu"
                  :key="column.id"
                  class="nav_li"
                >
                  <!-- 多级栏目(child为二级栏目) -->
                  <el-submenu
                    v-if="column.child && powerOn(column.id)"
                    :index="column.id"
                  >
                    <template slot="title">
                      <i :class="column.iCon" />{{ column.title }}
                    </template>
                    <!-- 二级栏目 -->
                    <div
                      v-for="child in column.child"
                      :key="child.id"
                    > 
                      <!-- 外链(aSrc为外链地址) -->
                      <a
                        v-if="child.aSrc && powerOn(child.id)"
                        :href="child.aSrc"
                        target="_block"
                        class="outer_a"
                      >{{ child.title }}</a>
                      <el-menu-item
                        v-else-if="powerOn(child.id)"
                        :index="child.src"
                      >                         
                        <!-- 内部跳转 -->
                        <span>
                          {{ child.title }}
                        </span>                      
                      </el-menu-item>
                    </div>
                  </el-submenu>
                  <!-- 单级栏目 -->
                  <a
                    v-else-if="column.aSrc && powerOn(column.id)"
                    :href="column.aSrc"
                    class="outer_aBl"
                    target="_block"
                  >
                    <i :class="column.iCon" />{{ column.title }}
                  </a>
                  <el-menu-item
                    v-else-if="powerOn(column.id)"
                    :index="column.src"
                  >                    
                    <span>
                      <i :class="column.iCon" />{{ column.title }}
                    </span>                   
                  </el-menu-item>
                </div>
              </el-menu>
            </el-col>
            <el-col
              :span="3"
              style="text-align: right;"
            >
              <el-dropdown @command="logOut">
                <span class="el-dropdown-link">
                  <i
                    class="el-icon-s-custom"
                    style="margin-right: 10px;"
                  />{{ username }}
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="powerOn('7')"
                    command="reset"
                  >
                    修改密码
                  </el-dropdown-item>
                  <el-dropdown-item
                    command="out"
                    @click="logOut"
                  >
                    退出
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <el-container>
          <transition name="fad">
            <router-view />
          </transition>            
        </el-container>
      </el-container>      
    </div>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="resetPassword"
      center
      width="600px"
    >
      <el-form
        ref="setRef"
        :model="setForm"
        :rules="setRules"
      >
        <el-row>
          <el-col :span="4">
            <div class="user_te">
              用户名：
            </div>
          </el-col>
          <el-col :span="20">
            <el-form-item prop="username">
              <el-input
                v-model="setForm.username"
                prefix-icon="el-icon-user"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="user_te">
              原密码：
            </div>
          </el-col>
          <el-col :span="20">
            <el-form-item prop="password">
              <el-input
                v-model="setForm.password"
                type="password"
                prefix-icon="el-icon-lock"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="user_te">
              新密码：
            </div>
          </el-col>
          <el-col :span="20">
            <el-form-item prop="setPassword">
              <el-input
                v-model="setForm.setPassword"
                prefix-icon="el-icon-lock"
                @keyup.enter.native="resPass()"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="resetPassword = false">取 消</el-button>
        <el-button
          type="primary"
          @click="resPass()"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码 -->
  </div>  
</template>

<script>
  export default {
    data(){
      return {
        username:sessionStorage.getItem('username'),//用户名
        resetPassword:false,
        setForm: {
          username: sessionStorage.getItem('username'),
          password: '',
          setPassword: ''
        },
        /*
          导航数据：child（二级导航）、aSrc（外链）
        */
        menu:[ 
          {
            id:"1",src:'1',title:'后台首页',iCon:'iconfont icon-xiantiao-shouye',
            child:[
              {id:"11",src:'/common/',title:'系统信息'},
              {id:"12",src:'12',title:'统计流量',aSrc:'https://uweb.umeng.com/v1/login.php?siteid=1279263413'}
            ]
          },
          {
            id:"2",src:'/common/content/banner',title:'内容管理',iCon:'el-icon-document-copy'
          }, 
          {
            id:"3",src:'/common/message/',title:'留言管理',iCon:'el-icon-chat-dot-square'
          }, 
          {
            id:"4",src:'4',title:'系统设置',iCon:'el-icon-setting',
            child:[
              {id:"41",src:'/common/logInfo',title:'登陆日志'},
              {id:"42",src:'/common/opLog',title:'操作日志'},
              {id:"43",src:'/common/role',title:'角色管理'}
            ]
          },
          {
            id:"5",src:'/common/explain',title:'操作说明',iCon:'iconfont icon-shuoming'
          }, 
          {
            id:"6",src:'6',aSrc:'https://github.com/kingdom1-0/project',title:'外链',iCon:'iconfont icon-wailian'
          },          
        ],
        menuPower:[],//导航权限
        setRules: {
          username: [ // 预验证用户名
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 15,
              message: '长度在 3 到 15 个字符',
              trigger: 'blur'
            }
          ],
          password: [ // 预验证密码
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ],
          setPassword: [ // 预验证新密码
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ]
        },
      }
    },
    mounted:function(){
      this.getMenuPower();//获取导航权限数据
    },
    methods:{  
      //权限开关
      powerOn(id){
        return this.menuPower.includes(id);
      },
      //导航权限数据
      async getMenuPower(){
        const {data:res} = await this.$http.get("roles");  
        this.menuPower = res.find((item)=>{
          return item.username === this.username
        }).menu.split(",")
        console.log(this.menuPower)
      },
      resPass() {
        this.$refs.setRef.validate(async value => { // 表单预验证
          if (!value) {
            return
          }
          // 登陆验证
          const {data: res} = await this.$http.put('login', this.setForm)
          if (res.meta.status !== 200) { // 登陆失败，提示失败信息并return
            return this.$message.error(res.meta.message)
          } 
          this.$message.success(res.meta.message) //成功提示
          sessionStorage.removeItem('token'); 
          this.resetPassword = false
          this.$refs.setRef.resetFields();
          this.$router.push('/login')         
        })
      },
      logOut(val){ 
        if(val == 'reset'){
          this.resetPassword = true
        }else{
          sessionStorage.clear()
          this.$router.push('/login')      
        }          
      }
    }  
  }

</script>
<style scoped>
  .man_body {height:100%;}
  .el-header {
    background-color: #545c64;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .man_content {
    position: relative;
    width: 100%;
    height: 100%;
  }

  section.el-container {
    height: 100%;
  }

  ul.el-menu {
    height: 100%;
  }

  .logo {
    margin-top: 16px;
    float: left;
    margin-right: 30px;
    outline: none;
  }

  i {
    color: #fff;
    position: relative;
    top: -1px;
  }

  li.el-submenu.is-active i,
  li.el-submenu.is-active a {
    color: #409EFF;
  }

  a:hover {
    color: #409EFF;
  }

  .el-menu-item-group__title {
    font-size: 14px;
    color: #333;
  }

  .el-menu-item {
    color: #888;
  }

  .el-dropdown-link {
    display: block;
    color: #fff;
    padding-top: 20px;
    outline: none;
  }
 
  ul.el-menu-demo.el-menu--horizontal.el-menu {
    min-width: 1000px;
  }

  .user_te {
    line-height: 40px;
    text-align: right;
    padding-right: 20px;
  }

  .ind_content {
    min-height: auto;
    overflow: visible;
  }

  .el_a {
    color: #fff;
  }

  .el-submenu.is-active .el-submenu__title span.title {
    color: #409EFF;
  }

  .el-menu {
    transform: all 0.3s ease;
  }

  .el-header a {
    padding: 20px 0;
  }

  i.iconfont {
    margin-right: 6px;
  }  
  .nav_li {
    float: left;
  }
  .nav_li a {color:#fff;}
  ul.el-menu-demo.el-menu--horizontal.el-menu {
      border-bottom: 0;
  }
  .el-menu--horizontal .el-menu .el-menu-item div {
      line-height: 36px;
  }
  a.outer_aBl {
      height: 56px;
      line-height: 56px;
      margin-left: 20px;
  }
  a.outer_a {
      height: 36px;
      line-height: 36px;
      padding: 0 10px;
      color: #fff;
  }
  .outer_aBl i {transition: all 0.3s;}
  .outer_a:hover,.outer_aBl:hover,.outer_aBl:hover i {color:rgb(64, 158, 255)}  
</style>
